<script lang="ts" setup>
import { useVariableStore } from "@/stores/variable"
const variableStore = useVariableStore()
</script>

<template>
    <umrp-page bg-color="#f2f2f2">
        <umrp-carousel>
            <umrp-carousel-item>
                <umrp-image :height="250"></umrp-image>
            </umrp-carousel-item>
            <umrp-carousel-item>
                <umrp-image :height="250"></umrp-image>
            </umrp-carousel-item>
        </umrp-carousel>
        <umrp-container padding="10px" :gap="10">
            <umrp-card :border="false">
                <template #body>
                    <umrp-container padding="10px" :gap="10">
                        <umrp-text :size="12" bold>瑞幸即溶咖啡2.3g加量装太空杯 FD航天冻干科技锁住咖啡香还原现磨风味</umrp-text>
                        <umrp-text :size="12" color="secondary">已售卖446400+件</umrp-text>
                    </umrp-container>
                </template>
            </umrp-card>
            <umrp-card :border="false">
                <template #body>
                    <umrp-container padding="10px" :gap="10">
                        <umrp-container direction="horizontal" justify="between">
                            <umrp-text>用户评价(115)</umrp-text>
                            <umrp-text color="red">好评率 75.7% &gt;</umrp-text>
                        </umrp-container>
                        <umrp-container :gap="10" padding="10px" bg-color="#f2f2f2">
                            <umrp-container direction="horizontal" justify="between" align="center" v-for="_ in 1">
                                <umrp-space :size="4" align="center">
                                    <umrp-avatar :width="32" :height="32" bg-color="#ccc"></umrp-avatar>
                                    <umrp-text>vpas**12</umrp-text>
                                </umrp-space>
                                <umrp-text>2024-08-06</umrp-text>
                            </umrp-container>
                            <umrp-text>超甜的小西瓜。好吃。</umrp-text>
                        </umrp-container>
                    </umrp-container>
                </template>
            </umrp-card>
            <umrp-card :border="false">
                <template #body>
                    <umrp-container padding="10px" :gap="10">
                        <umrp-text>商品详情</umrp-text>
                        <umrp-image :height="2000"></umrp-image>
                    </umrp-container>
                </template>
            </umrp-card>
        </umrp-container>
        <umrp-action-bar>
            <umrp-container padding="10px">
                <umrp-row :gutter="10" align="center">
                    <umrp-col flex="60px" v-route="'XiaolankaClientShoppingCart'">
                        <umrp-text-icon :size="4">购物车</umrp-text-icon>
                    </umrp-col>
                    <umrp-col>
                        <umrp-button type="primary" shape="round" outline full>加入购物车</umrp-button>
                    </umrp-col>
                    <umrp-col>
                        <umrp-button type="primary" shape="round" full
                            v-state:click="{ productDetailDrawer: true }">立即购买</umrp-button>
                    </umrp-col>
                </umrp-row>
            </umrp-container>
        </umrp-action-bar>
        <umrp-drawer v-model:visible="variableStore.variable.productDetailDrawer">
            <umrp-container padding="16px" :gap="50">
                <umrp-media>
                    <umrp-space direction="vertical" :size="10">
                        <umrp-text color="red" bold>￥66 到手价</umrp-text>
                        <umrp-text color="secondary">￥99</umrp-text>
                        <umrp-text>已选:加浓混合1盒18杯 加赠2杯咖啡液 到手20杯</umrp-text>
                    </umrp-space>
                </umrp-media>
                <umrp-container :gap="10">
                    <umrp-text>选择规格</umrp-text>
                    <umrp-radio-group default-value="1">
                        <umrp-radio :value="key" v-for="key in 8">桂花龙井风味即溶咖啡1盒(18杯)</umrp-radio>
                    </umrp-radio-group>
                </umrp-container>
                <umrp-button type="primary" shape="round" v-route="'XiaolankaClientOrderConfirm'">立即购买</umrp-button>
            </umrp-container>
        </umrp-drawer>
    </umrp-page>
</template>